<!--
 * 学生考试首页组件
 * 
 * 功能说明：
 * 1. 学生功能的主导航页面
 * 2. 提供考试中心、试卷练习、我的分数、交流区等功能入口
 * 3. 显示用户信息和退出登录功能
 * 4. 管理练习模式和正式考试模式的切换
 * 5. 作为学生功能的路由容器
 * 
 * 主要功能模块：
 * - 考试中心：正式考试模式
 * - 试卷练习：练习模式，可以查看答案和解析
 * - 我的分数：查看历史考试成绩
 * - 交流区：学生交流功能
 * - 用户管理：修改密码、退出登录
 * 

-->
<template>
  <div id="student">
    <!-- 顶部导航栏 -->
    <el-row class="padding-50">
      <el-col :span="24">
        <ul class="list">
          <!-- 系统Logo -->
          <li class="logo"><span>在线考试系统</span></li>
          
          <!-- 考试中心 - 正式考试模式 -->
          <li @click="exam()">
            <a href="javascript:;" >考试中心</a>
          </li>
          
          <!-- 试卷练习 - 练习模式 -->
          <li @click="practice()">
            <a href="javascript:;" >试卷练习</a>
          </li>
          
          <!-- 我的分数 - 查看历史成绩 -->
          <li>
            <router-link to="/scoreTable">我的分数</router-link>
          </li>
          
          <!-- 交流区 - 学生交流功能 -->
          <li>
            <router-link to="/message">交流区</router-link>
          </li>
          
          <!-- 用户信息下拉菜单 -->
          <li class="right" @mouseenter="flag = !flag" @mouseleave="flag = !flag">
            <a href="javascript:;">
              <i class="iconfont icon-Userselect icon"></i>{{user.userName}}
            </a>
            <!-- 用户下拉菜单 -->
            <div class="msg" v-if="flag">
              <p @click="manage()">修改密码</p>
              <p class="exit" @click="exit()">退出</p>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
    
    <!-- 路由视图区域 - 显示子页面内容 -->
    <div class="main">
      <router-view></router-view>
    </div>
    
    <!-- 页脚组件 -->
    <v-footer></v-footer>
  </div>
</template>

<script>
// 导入页脚组件
import myFooter from "@/components/student/myFooter"
// 导入Vuex的mapState辅助函数
import {mapState} from 'vuex'

export default {
  // 注册子组件
  components: {
    "v-footer": myFooter // 页脚组件
  },
  
  data() {
    return {
      flag: false, // 用户下拉菜单显示状态
      user: {}     // 用户信息对象
    }
  },
  
  // 组件创建时获取用户信息
  created() {
    this.userInfo()
  },
  
  methods: {
    /**
     * 退出登录
     * 清除所有cookie并跳转到登录页
     */
    exit() {
      this.$router.push({path:"/"}) // 跳转到登录页面
      
      // 清除所有用户相关的cookie
      this.$cookies.remove("cname")     // 清除用户姓名
      this.$cookies.remove("cid")       // 清除用户ID
      this.$cookies.remove("rb_token")  // 清除登录令牌
      this.$cookies.remove("rb_role")   // 清除用户角色
    },
    
    /**
     * 跳转到修改密码页面
     */
    manage() {
      this.$router.push({path: '/manager'})
    },
    
    /**
     * 获取用户信息
     * 从cookie中读取用户姓名和ID
     */
    userInfo() {
      let studentName = this.$cookies.get("cname") // 获取学生姓名
      let studentId = this.$cookies.get("cid")     // 获取学生ID
      
      console.log(`studentId${studentId}`)
      console.log(`studentName ${studentName}`)
      
      // 设置用户信息
      this.user.userName = studentName
      this.user.studentId = studentId
    },
    
    /**
     * 跳转到练习模式
     * 设置Vuex状态为练习模式，然后跳转到开始考试页面
     */
    practice() {
      let isPractice = true // 设置为练习模式
      this.$store.commit("practice", isPractice) // 提交到Vuex状态管理
      this.$router.push({path:'/startExam'}) // 跳转到开始考试页面
    },
    
    /**
     * 跳转到正式考试模式
     * 设置Vuex状态为正式考试模式，然后跳转到学生首页
     */
    exam() {
     let isPractice = false // 设置为正式考试模式
      this.$store.commit("practice", isPractice) // 提交到Vuex状态管理
      this.$router.push({path:'/student'}) // 跳转到学生首页
    }
  },
  
  // 计算属性：从Vuex获取练习模式状态
  computed: mapState(["isPractice"])
}
</script>

<style scoped>
/* 用户图标样式 */
.right .icon {
  margin-right: 6px;
}

/* 学生页面整体样式 */
#student .padding-50 {
  margin: 0 auto;
  padding: 0 50px;
  box-shadow: 0 0 10px 4px rgba(1,149,255,0.1); /* 蓝色阴影效果 */
  background-color: #fff;
}

/* 导航链接样式 */
.list a {
  text-decoration: none;
  color: #334046;
}

/* 列表项基础样式 */
li {
  list-style: none;
  height: 60px;
  line-height: 60px;
}

/* 导航列表样式 */
#student .list{
  display: flex; /* 水平排列 */
}

#student .list li {
  padding: 0 20px;
  cursor: pointer; /* 鼠标悬停时显示手型 */
}

/* 导航项悬停效果 */
#student .list li:hover {
  background-color: #0195ff; /* 悬停时背景变蓝 */
  transition: all 2s ease; /* 过渡动画 */
}

#student .list li:hover a {
  color: #fff; /* 悬停时文字变白 */
}

/* 右侧用户信息区域样式 */
#student .list .right {
  margin-left: auto; /* 推到最右边 */
  position: relative; /* 相对定位，为下拉菜单做准备 */
}

#student .list li.right :hover a {
  color: #000;
}

/* Logo样式 */
#student .list .logo {
  display: flex;
  font-weight: bold;
  color: #2f6c9f; /* 深蓝色 */
}

#student .list .logo i {
  font-size: 50px;
}

/* 用户下拉菜单样式 */
.right .msg {
  text-align: center;
  position: absolute; /* 绝对定位 */
  top: 60px; /* 位于导航栏下方 */
  left: 0px;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  border-radius: 2px;
  border-bottom: 3px solid #0195ff; /* 底部蓝色边框 */
  background-color: #fff;
}

.right .msg p {
  height: 40px;
  line-height: 40px;
  width: 105px;
}

/* 下拉菜单项悬停效果 */
.right .msg p:hover {
  background-color: #0195ff; /* 悬停时背景变蓝 */
}
</style>
